<template>
  <div class="q-pa-md">
    <t-btn color="purple" @click="showNotif" label="Show Notifications" />
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';

  export default {
    setup() {
      const $q = useQuasar();

      return {
        showNotif() {
          $q.notify({
            message: 'Jim just pinged you.',
            color: 'primary',
            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
            actions: [
              {
                label: 'Dismiss',
                color: 'white',
                handler: () => {
                  /* ... */
                },
              },
            ],
          });

          $q.notify({
            message: 'Jim just pinged you.',
            color: 'primary',
            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
            actions: [
              {
                label: 'Reply',
                color: 'yellow',
                handler: () => {
                  /* ... */
                },
              },
              {
                label: 'Dismiss',
                color: 'white',
                handler: () => {
                  /* ... */
                },
              },
            ],
          });

          $q.notify({
            message: 'Jim just pinged you.',
            color: 'primary',
            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
            actions: [
              {
                icon: 'close',
                color: 'white',
                round: true,
                handler: () => {
                  /* ... */
                },
              },
            ],
          });
        },
      };
    },
  };
</script>
